<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		<!-- 
		  组件是可复用的 Vue 实例，且带有一个名字
		  1.定义组件
		  >>全局 Vue.component('组件名',配置项)
		  >>配置项:
		    1.template模板
			2.data数据,
			3.name组件名称
		  2.<组件名></组件名>
		-->
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<div id="app">
			<button-counter></button-counter>
			<button-counter></button-counter>
		</div>
		<script type="text/javascript">
			//全局组件
			Vue.component('button-counter', {
				template: '<button style="color:red" @click="counter++">点击{{counter}}</button>',
				data: function() {
					console.log(this);
					return {
						counter: 0
					}
				}
			})
			let vm = new Vue({
				el: '#app',
				//数据
				// data: {},
				//方法
				// methods:{},
				//计算属性
				// computed:{},
				//监视属性
				// watch:{},
				//过滤器
				// filters:{},
				//自定义指令
				// directives:{}
			})
			console.log(vm);
		</script>
	</body>
</html>
